{% extends './layout.html.twig' %}

{% block title %}Backtesting | Crypto Bot{% endblock %}

{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Backtesting</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ '/' }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Backtesting</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.Content Header (Page header) -->

        <!-- Main content -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{ '/backtest/submit' }}" method="post" class="backtest-form">

                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-sm">
                                                <div class="form-group">
                                                    <label for="form-pair">Pair</label>
                                                    <select class="form-control chosen-select" id="form-pair" name="pair" data-placeholder="Select one or multiple symbols" required multiple>
                                                        {% for pair in pairs %}
                                                            <option data-options="{% if pair.options %}{{ pair.options|format_json|escape('html') }}{% endif %}">{{ pair.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <small class="form-text text-muted">Select one for detail view or multiple for a profit overview</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="form-strategies">Strategy</label>
                                                    <select class="form-control chosen-select" id="form-strategies" name="strategy" required>
                                                        <option disabled selected value> -- select an option -- </option>
                                                        {% for strategy in strategies %}
                                                            <option data-options="{% if strategy.options %}{{ strategy.options|format_json|escape('html') }}{% endif %}">{{ strategy.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label for="form-candle-period">Candle Period</label>
                                                    <select class="form-control" id="form-candle-period" name="candle_period" required>
                                                        {% if pairs|length > 0 %}
                                                            {% for period in pairs[0].options %}
                                                                <option value="{{ period }}" {% if period == '15m' %}selected{% endif %}>{{ period }}</option>
                                                            {% endfor %}                                                        
                                                        {% endif %}
                                                    </select>

                                                    <small class="form-text text-muted">Candle frequency of the chart on result page</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="form-hours">Last Hours</label>
                                                    <input class="form-control" id="form-hours" name="hours" value="168" required>
                                                    <small class="form-text text-muted">Starting window until now</small>
                                                </div>
                                            </div>

                                            <div class="col-sm">
                                                <div class="form-group">
                                                    <label for="form-initial-capital">Initial Capital </label>
                                                    <input class="form-control" id="form-initial-capital" name="initial_capital" value="10000" required>
                                                    <small class="form-text text-muted">Starting capital for calculating trades and their profit and losses</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="form-tick-interval">Signal Tick Interval (in minutes)</label>
                                                    <input class="form-control" id="form-tick-interval" name="ticker_interval" value="15" required>
                                                    <small class="form-text text-muted">Interval in which the strategy is mainly run</small>
                                                </div>

                                                <div class="form-group">
                                                    <label for="form-options">Strategy Options</label>
                                                    <textarea class="form-control" id="form-options" rows="6" name="options"></textarea>
                                                    <small class="form-text text-muted">Options provided by the strategy itself</small>
                                                </div>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>

                                </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

{% endblock %}

{% block javascript %}
<script src="/js/backtest-form.js?v={{ asset_version() }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>
{% endblock %}

{% block stylesheet %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
{% endblock %}